<!DOCTYPE html>
<html lang="en">

<head>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes"/>
    <meta charset="UTF-8">
    <title>推送测试</title>
    <link rel="icon" href="/ico.ico" sizes="32x32">
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
    <style>
        .button {
            background-color: #4CAF50; /* Green */
            border: none;
            color: white;
            padding: 15px 32px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 4px 2px;
            cursor: pointer;
            -webkit-transition-duration: 0.4s; /* Safari */
            transition-duration: 0.4s;
            border-radius: 15px;
        }

        .button1 {
            box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        }

        .button2:hover {
            box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
        }
    </style>
    <script type="text/javascript">


        function onloaded(){
            document.getElementById("result").innerText = {{ data }}
        }

        function ding() {
            document.getElementById("result").innerText = ""
            axios.get(pathFix + "/push/ding?userid=90&type=check_in")
                .then(function (response) {
                    console.log(response);
                    document.getElementById("result").innerText = response.request.responseText
                    document.getElementById("button").disabled = true
                    app.delayHistory()
                }).catch(function (error) {
                document.getElementById("result").innerText = error.message
            });
        }
        function backHome() {
            axios.get(pathFix + "/push/ding?userid=90&type=back_home")
                .then(function (response) {
                    console.log(response);
                    document.getElementById("result").innerText = "指令已发送" + new Date().getTime()
                }).catch(function (error) {
                document.getElementById("result").innerText = error.message
            });
        }

    </script>
</head>
<body onload="onloaded()">
<button id="button" onclick="ding()" class="button button1">推送消息</button><button id="open_home" onclick="backHome()" class="button button1">返回消息</button>
<div id="result"></div>

<div id="app">
    <ul>
        <li v-for="(h,index) in info">
            {{ h.created }}
        </li>
    </ul>
</div>

<script type="text/javascript">
    let names = window.location.pathname.split('/');
    var pathFix = "";
    if(names.length > 2){
        pathFix = "/" + names[1];
    }
    var app = new Vue({
        el: "#app",
        data() {
            return {
                info: [{'id': 0}, {'id': 1}],
                timer: '',
                time: 10,
                button : document.getElementById("button")
            }
        },
        created() {
            this.list()
        },
        methods: {
            list() {
                axios.get(pathFix + "/push/history?userid=90")
                    .then(function (response) {
                        app.info = response.data.data
                        document.getElementById("result").innerText = "code:" + response.data.code
                    }).catch(function (error) {
                    document.getElementById("result").innerText = error.message
                });
            },
            interval() {
                this.button.innerText = "正在返回结果：" + this.time
                this.time--
                if (this.time === 0) {
                    clearInterval(this.timer);
                    this.button.innerText = "再次推送"
                    this.button.disabled = false
                    this.list()
                }
            },
            delayHistory() {
                this.time = 15
                console.log("delayHistory")
                this.timer = setInterval(this.interval, 1000)
            }
        },
        beforeDestroy() {
            clearInterval(this.timer);
        }

    });

</script>
</body>
</html>